<!--
  批示 ，已阅
-->
<template>
  <div class="container-box">
    <div class="container-right-top">
      已选用户({{ selectList.length }})
      <delete-outlined class="total-delete-icon" title="清空" @click="handleDelSelectedTotal" />
    </div>
    <div class="checkgroup">
      <s-table
        ref="tableRefName"
        :show-header="false"
        :show-table-setting="false"
        :columns="selectListColumns"
        :data-source="selectList"
        :row-key="(record) => record.key"
        :pagination="false"
        :row-height="36"
        :height="310"
        :row-drag="true"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'title'">
            <div style="display: flex; align-items: center">
              <span class="user-icon">
                <avic-icon svg="avic-account-circle-fill" color="#3370ff" />
              </span>
              <a-tooltip placement="topLeft" :mouse-enter-delay="1" :title="getTitle(record)">
                <span class="cell-txt">
                  <span>{{ text }}</span>
                  <span class="cell-txt-dept">
                    {{ getAttributes(record) }}
                  </span>
                </span>
              </a-tooltip>
              <div class="checkclose" title="取消已选" @click="handleDelSelectedItem($event, record)">
                <avic-icon svg="avic-close-fill" style="font-size: 1.3em" />
              </div>
            </div>
          </template>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SelectUserBox',
  components: {
    // AIcon: Icon,
    // plusIcon
  },
  props: {
    userBoxList: {
      type: Array,
      default: () => []
    },
    selectFlowTab: {
      type: [Number, String],
      required: false, // 校验
      default: 0
    },
    showMoreUserInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectUser: [],
      selectList: [], // 保存表格数据列表
      select: null, // 单选选中的人
      tableRefName: 'tableRefName',
      selectListColumns: [
        {
          title: '已选用户',
          headerAlign: 'left',
          dataIndex: 'title',
          key: 'title',
          rowDrag: true
        }
      ],
      dataIndex: 'title',
      indeterminate: false, // 右侧区域已选用户复选框半选状态
      checkAll: false, // 右侧区域已选用户复选框全选状态
      errorMessage: '暂无数据'
    };
  },
  watch: {
    selectList: {
      immediate: true,
      handler(newV) {
        this.selectListColumns[0].title = `已选用户 (${newV?.length || 0})`;
      }
    }
  },
  mounted() {},
  methods: {
    getUserData(data) {
      this.selectUser = data;

      const selectUserObjs = [];

      this.selectUser?.forEach((tim) => {
        if (tim.selectFlowTab === this.selectFlowTab) {
          // tim.users.forEach((item) => {
          //   item.uniqueKey = item.id + item.deptId;
          // });
          selectUserObjs.push(tim.users);
        }
      });

      [this.selectList] = selectUserObjs;
    },
    handleDelSelectedTotal() {
      /* let selectedNum = 0;
      let selectedData = [];
      let unselectedData = [];
      for (let i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].bigTableDataChecked) {
          selectedNum++;
          selectedData.push(this.selectList[i]);
        } else {
          unselectedData.push(this.selectList[i]);
        }
      }
      if (selectedNum == 0) {
        this.$message.warning('请选择要删除的数据！');
        return;
      } else {
        this.selectList = unselectedData;
        this.deleteUser(unselectedData);
        this.$refs[this.tableRefName].bigDataTableLoadData(this.selectList);
      } */
      this.selectList = [];
      this.deleteUser(this.selectList);
    },
    handleRowSelection({ selectedRowKeys }) {
      const select = this.selectList;
      select.forEach((item) => {
        if (selectedRowKeys.includes(item.key)) {
          item.bigTableDataChecked = true;
        } else {
          item.bigTableDataChecked = false;
        }
      });
      this.selectList = select;
    },
    handleDelSelectedItem(e, item) {
      e.stopPropagation();
      const selectList = [];
      for (let i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].key !== item.key) {
          selectList.push(this.selectList[i]);
        }
      }
      this.selectList = selectList;
      this.deleteUser(selectList);
    },
    rowDrop(tableData) {
      if (tableData) {
        this.selectList = tableData;
        this.selectUser.forEach((tim) => {
          if (tim.selectFlowTab === this.selectFlowTab) {
            tim.users = JSON.parse(JSON.stringify(this.selectList));
          }
        });
        this.$emit('changeSelectUser', this.selectUser);
      }
    },

    // 获取数组下标
    // getIndex(all, id) {
    //   let index = -1;
    //   all.forEach((tim, i) => {
    //     if (tim.key === key) {
    //       index = i;
    //     }
    //   });
    //   return index;
    // },
    changeSelectUser(e) {
      this.selectUser = e;
      this.selectUser.forEach((tim) => {
        if (tim.selectFlowTab === this.selectFlowTab) {
          this.selectList = tim.users;
        }
      });
    },
    // 排序
    sorting(arr, kay, j) {
      arr.splice(kay, 1, ...arr.splice(j, 1, arr[kay]));
    },
    // 选中人员
    clickSelect(tim) {
      if (this.select && this.select.key === tim.key) {
        this.select = null;
      } else {
        this.select = tim;
      }
    },
    // 删除单项
    deleteUser(itemList) {
      if (this.selectUser) {
        this.selectUser.forEach((tim, i) => {
          if (this.selectFlowTab === i) {
            tim.users = [...itemList];
          }
        });
        this.$emit('changeSelectUser', this.selectUser);
      }
    },
    /** 获取tooltip  */
    getTitle(record) {
      const str = record.title;
      const attributes = this.getAttributes(record);
      return attributes ? str + attributes : str;
    },
    /** 获取额外的附件信息组合  */
    getAttributes(record) {
      let str = '';
      const values = [];
      if (this.showMoreUserInfo) {
        if (typeof this.showMoreUserInfo == 'object' && this.showMoreUserInfo.length > 0) {
          for (let i = 0; i < this.showMoreUserInfo.length; i++) {
            if (record.attributes && record.attributes[this.showMoreUserInfo[i]]) {
              values.push(record.attributes[this.showMoreUserInfo[i]]);
            }
          }
        }
        if (values.length === 0) {
          const deptName = record.attributes && record.attributes.deptName ? record.attributes.deptName : '';
          if (deptName) {
            values.push(deptName);
          }
        }
      } else if (record.deptName) {
        values.push(record.deptName);
      }
      if (values.length > 0) {
        str = `(${values.join('/')})`;
      }
      return str;
    }
  }
};
</script>
<style scoped lang="less">
:deep(.surely-table-body) {
  position: initial;
  overflow-x: hidden;
}
</style>
